<template>
    <view>
        <view class="search-view">
			<view class="search-box">
				<uni-icons customPrefix="iconfont" type="icon-sousuo" size="32rpx"></uni-icons>
				<input class="input" type="text" :value="searchText" :focus="searchFocus" @input="searchInput" placeholder="搜索联系人" placeholder-style="color: #d7d7d7;" confirm-type="search" @confirm="search()">
			</view>
		</view>
		<view class="select-contack" :class="{'select-contack1': activeType==-1}" v-if="selectAllInfo.length>0">
			<view class="image-list">
				<view class="user-item" v-for="(item, i) in selectAllInfo" :key="i">
					<image :src="utils.headImage(item)" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
				
			</view>
			<uni-icons type="right" @click="selectedContact"></uni-icons>
		</view>
        <view class="title" v-if="activeType==-1">
			选择联系人
		</view>
		
		<view class="" v-if="resultList.length>0">
			<view class="txl-org-item" v-for="(item, i) in resultList" :key="i" @click="radioChange(item)">
				 <uni-icons v-if="selectAllInfo.findIndex(info=>info.accountId == item.accountId)!=-1" type="checkbox-filled" color="#02A7F0" size="40rpx"></uni-icons>
                    <uni-icons v-else type="circle" size="40rpx"></uni-icons>
				<view class="logo-name">
					<image class="logo" :src="utils.headImage(item)" mode="aspectFill"></image>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="no-wrap">
					<text class="type" v-if="0">校长</text>
					<uni-icons @click.stop="this.utils.userDetails(item.accountId, item.userType)" customPrefix="iconfont" type="icon-icon--" size="40rpx"></uni-icons>
				</view>
			</view>
		</view>
		<view class="no-result" v-else-if="searchText">
			<image src="/static/txl/ku.svg" mode="aspectFill"></image>
			<text>没有搜索到结果</text>
		</view>
		<view class="content" v-if="!searchText">
			<view class="contact-list" v-if="activeType==-1">
				<view class="item" v-for="(item, i) in list" :key="i">
					<view class="info" @click="selectGroup(item.type)">
						<view class="logo-name">
							<image class="logo" :src="`/static/txl/${item.icon}.png`" mode="aspectFill"></image>
							<text class="name">{{item.name}}</text>
						</view>
						<uni-icons type="forward" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
			<view class="" v-if="activeType==3">
				<org-structure
					:mail-list="mailList"
					:step-bar="stepBar"
					:operation-type="3"
					:isOnshow="isOnshow"
					@selectIds="selectIds"
					@selectGroup="selectGroup"></org-structure>
			</view>
		</view>
		<view class="create-btn">
			
			<text class="btn" @click="addStarFriends()">确定</text>
		</view>
    </view>
</template>
<script>
import orgStructure from './components/org-structure.vue'
export default {
    components: {
        orgStructure
    },
    data() {
        return{
            searchText: '',
            searchFocus: false,
			stepBar: [],
			list: [{name: '组织架构', icon: 'xblx', type: 3}], // {name: '外部联系人', icon: 'wblxr', type: 2}, 
            // 组织结构
			mailList: {},
			showMailList: [],
			adminList: [],
			allAdminStudent: [],
			resultList: [],
			dataList: [],
			activeType: -1,

            selectAllInfo: [],
            studentIds: [],
            adminIds: [],
            cont_number: 0,
			isOnshow: 1
        } 
    },
	onShow(){
		this.isOnshow ++
		this.selectAllInfo = uni.getStorageSync('xdSelectAllInfo') || []

	},
    onLoad(){
        this.getfindMailList()
    },
    methods: {
        searchInput(e){
			this.searchText = e.detail.value;
			
			this.search()
		},
        search(){
			let resultList = [], that = this;
			if(!this.searchText) {
				this.resultList = []
				return
			}
			for(let i=0;i<this.allAdminStudent.length; i++){
				let info = this.allAdminStudent[i]||{}
				let inx = resultList.findIndex(item=>item.id==info.id&&item.type==info.type)
				if(info.name&&info.name.indexOf(this.searchText)!=-1 && inx==-1){

					resultList.push(info)
				}
			}
			this.resultList = resultList;
			
		},
        // 组织架构数据
		getfindMailList(){
			this.api.get('mailList/findMailList').then(res=>{
				if(res.data.state != 'ok') return;
				let data = res.data.node;
				this.mailList = data
				this.allAdminStudent = data.admins;
				this.dataList = data.children || [];
				let that = this;
				function fun(list){
					for(let i=0; i<list.length; i++){
						let datas = list[i]
						if(datas.type==3){
							that.allAdminStudent = that.allAdminStudent.concat(datas.admins, datas.students);
						}else if(datas.type>0){
							let arr = datas.children;
							fun(arr)
							that.allAdminStudent = that.allAdminStudent.concat(datas.admins);
							
						}
					}
					
				}
				fun(this.dataList)

			})
		},
        selectGroup(type){
			this.activeType = type;
			this.stepBar = []
			if(type == -1) return;
			this.stepBar.push({id: -1, name: '联系人'})
		},
		
		selectIds(data, info){
            this.studentIds = data.student
			this.adminIds = data.admin

			this.cont_number = data.student.length+data.admin.length

			let type = `${info.type||0}:${info.id}`, index = this.selectAllInfo.findIndex(item=>item.accountId == info.accountId)
			if(index==-1){
				this.selectAllInfo.push(info);
			}else{
				this.selectAllInfo.splice(index, 1)
			}
		},

        addStarFriends(){
			let accountIds = []

			for(let i=0;i<this.selectAllInfo.length;i++){
				let info = this.selectAllInfo[i]
				if(info.userType){
					accountIds.push(info.accountId)
				}
			}
			this.api.post('mailList/addStarFriends', {
				accountIds: JSON.stringify(accountIds)
			}).then(res=>{
                if(res.data.state != 'ok') return
				this.utils.showToast('添加成功')
				uni.removeStorageSync('xdSelectAllInfo')
                setTimeout(()=>{
					this.utils.goBack()
				}, 2000)
			})
		},
		radioChange(info){
			let type = info.type,
			id = info.id,
			userType = info.userType;
            let index = -1;
            if(userType == 2){
                index = this.studentIds.indexOf(id);
                if(index!=-1){
                    this.studentIds.splice(index, 1)
                }else{
                    this.studentIds.push(id)
                }
                
            }else if(userType == 1){
                index = this.adminIds.indexOf(id);
                if(index!=-1){
                    this.adminIds.splice(index, 1)
                }else{
                    this.adminIds.push(id)
                }
            }
            let obj = {
                student: this.studentIds,
                admin: this.adminIds
            }
            let item = {accountId: info.accountId, id: info.id, type: `${info.type||0}:${info.id}`,avatarUrl: info.avatarUrl||'', name: info.name, userType: info.userType, sex: info.sex}
			this.selectIds(obj, item)
        },
		selectedContact(){
			uni.setStorageSync('xdSelectAllInfo', this.selectAllInfo)
			uni.navigateTo({
				url: '/pages/addressBook/selected-contacts'
			})
		},
    }
}
</script>
<style lang="less" scoped>
    .search-view{
		padding: 40rpx 28rpx;
		background-color: #fff;
	}
	.search-box{
		
		padding: 0 20rpx;
		height: 34px;
		display: flex;
		align-items: center;
		border: 2rpx solid #d7d7d7;
		border-radius: 10rpx;
		font-size: 26rpx;
		.input{
			width: 84%;
			margin: 0 24rpx;
			font-size: 26rpx;
		}
	}

	.select-contack{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #F9F9F9;
		padding: 26rpx 32rpx;
		margin-bottom: 30rpx;
		
	}
	.select-contack1{
		border: none;
		margin-bottom: 0;
	}
	.image-list{
		width: 92%;
		white-space: nowrap;
		overflow-x: scroll;
		display: flex;
		.user-item{
			margin-right: 40rpx;
			width: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		text{
			margin-top: 16rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: bold;
			line-height: 32rpx;
		}
		image{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
	.no-result{
		height: calc(100vh - 308rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 40rpx;
		}
	}

    .title{
		padding-left: 32rpx;
		padding-top: 16rpx;
		height: 60rpx;
		box-sizing: border-box;
	}

    .content{
		// padding-top: 30rpx;
		background-color: #fff;
	}
	.contact-list{
		background-color: #fff;
	}
	.item {
		padding: 8rpx 20rpx 8rpx 16rpx;
	}
	.info{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx 0 16rpx;
		&:active{
			background-color: #f2f2f2;
			border-radius: 10rpx;
		}
	}
	.logo{
		width: 32rpx;
		height: 32rpx;
		margin-right: 26rpx;
	}
	.name{
		vertical-align: 6rpx;
		font-size: 28rpx;
	}
	.create-btn{
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		bottom: 0;
		padding: 20rpx 32rpx;
		height: 100rpx;
		background-color: #fff;
		text-align: right;
        box-sizing: border-box;
		.btn{
            display: inline-block;
			width: 124rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #169bd5;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			font-size: 26rpx;
		}
	}
</style>